了解了網頁的基本構造與常用元素後，是不是覺得畫面似乎不只這樣、為什麼我的畫面這麼簡單，是不是少了點什麼？
CSS 颯爽登場！
起初，網頁的樣式沒有任何規範，都寫在 HTML 內，結果 HTML 文件變得複雜，可以說是樣式的大戰國時代。CSS（ Cascading Style Sheets，中文為階層樣式表） 的概念首先在 1994 年由 Håkon Wium Lie 提出，最初的建議規範（CSS1）是 W3C 在1996 年末建立的。經過不斷新增、修改、演化後，成為了現在我們所認知的 CSS。目前的主要版本為 CSS3，從 CSS3 開始，CSS 的功能被拆成一個個的模塊，這樣方便各自更新與修改，而它仍然在持續進化／新增中。
CSS 不是標準的程式語言、也不是標記語言（目前最廣泛使用的標記語言是 HTML），而是網頁的樣式語言、也是網頁的風格（style）。簡單來說，網頁的外觀如排版（layout）、顏色、背景等，都可以藉客製化 CSS 來達到需求。
那要如何把這些設定好的樣式套用到 HTML 上呢？
Fig. 1. 行內樣式（inline style）的範例
可以直接在 HTML 內寫上 CSS，如 Fig. 1. ，替 button 加上 style 屬性，然後把 CSS 宣告在 style 內。
Fig. 2. 寫在 head 的 style 裡面 & 使用 link 引入外部連結
也可以寫在 head 裡頭，用一個 style 標籤包起來，裡面再放上各種 CSS 的宣告，如 Fig. 2.。
也可以直接寫成一個檔案，再從外部載入這包 CSS 檔案，如 Fig. 2. 的 head 內的兩個 link。使用時在 HTML 的 <head> 內以 link 標示 css 檔案的連結，rel 表示類型是樣式表。若需載入多個樣式檔案，依序放上 link 即可。瀏覽器會依擺放順序讀取並解析所有資訊與 CSS，這樣瀏覽器載入 HTML 檔案時，就會知道「喔喔，（我家可愛的） HTML 要穿這件衣服！」。
但目前主流是使用 link 來載入外部樣式，這樣 HTML 的程式碼不會過度冗長；且當專案規模大、檔案數較多時，也方便後續維護。
讓我們開始認識基本的使用法吧！
Fig. 3. CSS 的規則，MDN (https://developer.mozilla.org/zh-TW/docs/Learn/Getting_started_with_the_web/CSS_basics)
大多數 CSS 都長得一樣：都有選擇器（selector），大括號 { } 內會宣告成對的屬性（property）與屬性值（property value）。每次宣告完畢後，用分號表示這行已結束。
阿要怎麼使用呢？以下舉文字的 CSS 屬性們作為例子：
Fig. 4. 簡單的為 p 做了不同的 CSS 設定
code 如下
<div class="box">
<p>嗨你好</p>
<p>我是</p>
<p>一隻</p>
<p>海獺</p>
</div>
p{
background-color: rgb(193, 215, 246);
}
p:nth-child(1) {
font-size: 40px;
}
p:nth-child(2) {
font-style: italic;
}
p:nth-child(3) {
font-weight: 800;
}
p:nth-child(4) {
color: cadetblue;
font-weight: 800;
}
嗯……是不是覺得除了第一個 p 之外，其他好像都不太認識？
簡單來說，我替每個 p 都做了點不同的樣式設定，唯一一個共通的部分是背景顏色。
下一篇文章會為各位介紹選擇器（selectors）們。
參考資料
iThome鐵人賽
看影片追技術
看更多